<template>
  <view class="test">
    <!-- 工单历史 -->
    <!-- <view class="tabs">
      <view
        :class="['tabs-item', tabIdx == item.id ? 'act' : '']"
        v-for="(item, index) in typeList"
        :key="index"
        @click="handleClickTab(item.id)"
        >{{ item.text }}</view
      >
    </view> -->
    <!-- 整体历史工单 -->
    <order
      :elevatorId="elevatorId"
      v-if="partsId == 0"
      :stickyTop="stickyTop"
      @changeTab="changeTab"
    ></order>
    
    <part-history-list
      :elevatorId="elevatorId"
      :partsId="partsId"
      :stickyTop="stickyTop"
      @changeTab="changeTab"
      v-else
    ></part-history-list>
    <previewMedia ref="previewMedia"></previewMedia>
  </view>
</template>

<script>
import order from './history/order.vue';
import partHistoryList from './history/parts-history-list.vue';
export default {
	props: {
		elevatorId: {
			type: String,
		},
		partsId: {
			type: [String, Number],
		},
		stickyTop: {
			type: Number,
		},
	},
	components: {
		order,
		partHistoryList,
	},
	data() {
		return {
			typeList: [
				{ text: '全部', id: -1 },
				{ text: '保养', id: 0 },
				{ text: '维修', id: 1 },
				{ text: '配件', id: 2 },
				{ text: '救援', id: 3 },
			],
			tabIdx: -1,
			list: [
				{
					year: '2023',
					data: [
						{ date: '2023-11-10', data: [{ name: '保养', res: 222444 }] },
						{ date: '2023-11-11', data: [{ name: '救援', res: 222444 }] },
						{ date: '2023-11-12', data: [{ name: '配件', res: 223522 }] },
					],
				},
				{
					year: '2022',
					data: [
						{ date: '2022-11-10', data: [{ name: '保养', res: 222444 }] },
						{ date: '2022-11-11', data: [{ name: '救援', res: 222444 }] },
						{ date: '2022-11-12', data: [{ name: '配件', res: 223522 }] },
					],
				},
			],
		};
	},
	methods: {
		changeTab() {
			this.$emit('changeTab');
		},
		handleClickTab(res) { 
			this.tabIdx = res;
		},
	},
};
</script>

<style lang="scss" scoped>
.test {
  .tabs {
    background-color: #ffffff;
    display: flex;
    // border-bottom: 2rpx #eee solid;
    height: 76rpx;
    padding: 0 22rpx;
    align-items: center;
    justify-content: space-between;

    &-item {
      display: flex;
      width: 128rpx;
      height: 44rpx;
      background: #f3f6f8;
      border-radius: 22rpx;
      font-size: 26rpx;
      font-weight: 400;
      // border-bottom: 4rpx solid #fff;
      color: #666;
      transition: 0.4s all;
      justify-content: center;
      align-items: center;
    }

    .act {
      color: #0091ff;
      background: #dcf0ff;
    }
  }
}
.content {
  width: 100%;
  .year {
    width: 100%;
    .year_item {
      display: flex;
      position: relative;
      .year_left {
        position: absolute;
        left: 15rpx;
      }
      .year_right {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 60rpx;
      }
    }
  }
  .list {
    width: 100%;
    position: relative;
  }
}
.list_item {
  display: flex;
  width: 100%;
  position: relative;
  height: 110rpx;

  .left {
    position: relative;
    left: 14rpx;
    width: 110rpx;
    .line {
      width: 2rpx;
      height: calc(100% - 40rpx);
      background: #0091ff;
      position: absolute;
      left: 42rpx;
      margin: 20rpx 0;
      top: 16rpx;
    }
  }
}

.cbp_view {
  height: 20px;
  width: 570px;
}

.cbp_left {
  width: 120px;
  color: black;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: -60px;
}

.main {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.cbp_tmtimeline {
  width: 570px;
  margin: 40px 0 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

/* 线条*/
.cbp_tmtimeline:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #b8cad6;
  left: 25%;
  margin-left: -11px;
}

.cbp_tmtimeline > li {
  position: relative;
}
.cbp_tmtimeline > li .cbp_tmlabel {
  margin: -65px 0 15px 25%;
  color: black;
  padding: 0 1em;
  font-size: 1.2em;
  position: relative;
  border-radius: 5px;
}
.cbp_tmtimeline > li .cbp_tmicon {
  width: 18px;
  height: 18px;
  font-family: "ecoico";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  position: absolute;
  color: #fff;
  background: #46a4da;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #afdcf8;
  left: 26%;
  top: 0;
  margin: 0 0 0 -130px;
}

.test {
}
</style>
